<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Exceed - Responsive Bootstrap Template</title>
        
        <!-- stylesheets -->
        <link rel="stylesheet" type="text/css" href="/bootstrap/css/common.css"/>
        <!-- ZUI 标准版压缩后的 CSS 文件 -->
        <link rel="stylesheet" href="//cdn.bootcss.com/zui/1.9.1/css/zui.min.css">
        <!-- ZUI Javascript 依赖 jQuery -->
        <script src="//cdn.bootcss.com/zui/1.9.1/lib/jquery/jquery.js"></script>
        <!-- ZUI 标准版压缩后的 JavaScript 文件 -->
        <script src="//cdn.bootcss.com/zui/1.9.1/js/zui.min.js"></script>
        
        <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="/css/font-awesome.css" rel="stylesheet">
        <link href="/css/ionicons.css" rel="stylesheet">
        <!-- <link href="css/linea.css" rel="stylesheet"> -->
        <link href="/css/owl.carousel.css" rel="stylesheet">
        <link href="/css/style.css" rel="stylesheet">
        
        <link rel="stylesheet" type="text/css" href="/css/style2.css" />
        <script type="text/javascript" src="/js/modernizr.custom.28468.js"></script>
        
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200i,300,300i,400,600,700,700i,900" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Cardo:400,400i,700" rel="stylesheet">
		
    </head>
    <body>
        <!-- navbar -->
		<header>
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container nav-search">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <a class="navbar-brand" href="index">Exceed</a>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse nav-top">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="index">首页</a></li>
                        	<li><a href="articleSort">文章</a></li>
                            <li  th:if="${session.name==null}"><a href="contact">登录|注册</a></li>
                            <li  th:if="${session.name!=null}"><a class="iconfont icon-wodexuanzhong" th:text="${session.name}" href="home"></a></li>
                            <li  class="active"><a href="about">关于我们</a></li>
                        </ul>
                    </div>
					<div class="search-top">
						<div class="input-group">
							<div class="input-control search-box search-box-circle has-icon-left has-icon-right search-example" id="searchboxExample">
								<input id="inputSearchExample3" type="search" class="form-control search-input" placeholder="搜索">
								<label for="inputSearchExample3" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
							</div>
							<span class="input-group-btn">
								<button class="btn btn-primary" type="button" style="height: 34px;">搜索</button>
							</span>
						</div>
					</div>
                </div>
            </nav>
		</header>
        
        
        <!-- header -->
        <section class="header">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div class="intro">
                            <h2>About</h2>
                            <h3><span>Home</span>/<span>About</span></h3>
                        </div>  
                    </div>
                </div>
            </div>
        </section>
        
        <!-- feature -->
        <section class="feature">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-sm-7">
                        <img class="img-responsive center-block" src="/images/about-2.png" alt=""/>
                    </div>    
                    <div class="col-md-6 col-sm-5">
                        <div class="feature-content">
                            <h5>Who Is BlueBlur</h5>
                            <h3>Wendisse quis malesuada ante amet fringilla euismod.</h3>
                            <p>Fpendisse quis malesuada ante. Donec tempor leo sit amet fringilla euismod. Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum. Suspendisse ante nunc, eleifend eget turpis sit amet, sodales porttitor felis. Pellentesque et lectus risus. Sed porttitor fermentum luctus.</p>
                            <p class="hidden-sm">Fpendisse quis malesuada ante. Donec tempor leo sit amet fringilla euismod. Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum uspendisse ante nunc..</p>
                            <a class="btn btn-primary" href="">Read More</a>
                        </div>        
                    </div>
                </div>
            </div>    
        </section>
        
        <!-- about company -->
        <section class="about-company">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-md-offset-3">
                        <div id="carousel-example-generic" class="carousel slide people-opinion pull-right" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                            </ol>
                            <div class="carousel-inner" role="listbox">
                                <div class="item active">
                                     <ul class="list-inline">
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                    </ul>
                                    <span>More about the company</span>
                                    <h3>privately held company</h3>
                                    <p>“Envato is an Australia-based, privately held company that specializes in the start-up, promotion and operation of multiple online marketplaces.”</p>
                                    <a href="">Read More</a>
                                </div>
                                <div class="item">
                                     <ul class="list-inline">
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                    </ul>
                                    <span>More about the company</span>
                                    <h3>privately held company</h3>
                                    <p>“Envato is an Australia-based, privately held company that specializes in the start-up, promotion and operation of multiple online marketplaces.”</p>
                                    <a href="">Read More</a>
                                </div>
                                <div class="item">
                                     <ul class="list-inline">
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                    </ul>
                                    <span>More about the company</span>
                                    <h3>privately held company</h3>
                                    <p>“Envato is an Australia-based, privately held company that specializes in the start-up, promotion and operation of multiple online marketplaces.”</p>
                                    <a href="">Read More</a>
                                </div>
                            </div>
                        </div><!-- carousel -->
                    </div>
                </div>
            </div>
        </section>
        
        <!-- skillbars -->
        <section class="skills">
            <div class="container-fluid"> 
                <div class="row">
                    <div class="col-md-6">
                        <div class="all-skillbar">
                            <h3>What recommends us - our best features</h3>
                            <div class="skillbars">
                                <h4>Web Design</h4>
                                <div class="skillbar clearfix" data-percent="86%">
                                    <div class="skill-bar-percent">86%</div>
                                    <div class="skillbar-bar"></div>
                                </div>
                            </div>  
                            <div class="skillbars">
                                <h4>HTML / CSS</h4>
                                <div class="skillbar clearfix" data-percent="100%">
                                    <div class="skill-bar-percent">100%</div>
                                    <div class="skillbar-bar"></div>
                                </div>
                            </div>    
                            <div class="skillbars">
                                <h4>Project Management</h4>
                                <div class="skillbar clearfix" data-percent="76%">
                                    <div class="skill-bar-percent">76%</div>
                                    <div class="skillbar-bar"></div>
                                </div>
                            </div>    
                            <div class="skillbars">
                                <h4>Video Production</h4>
                                <div class="skillbar clearfix" data-percent="57%">
                                    <div class="skill-bar-percent">57%</div>
                                    <div class="skillbar-bar"></div>
                                </div>
                            </div>    
                        </div>
                    </div>
                    <div class="col-md-6 p-0 skill-bg">
                        <div class="feature-content">
                            <h5>About Out Skills</h5>
                            <h3>Wendisse quis malesuada ante amet fringilla euismod.</h3>
                            <p>Fpendisse quis malesuada ante. Donec tempor leo sit amet fringilla euismod. Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum. Suspendisse ante nunc, eleifend eget turpis sit amet.</p>
                            <p>Fpendisse quis malesuada ante. Donec tempor leo sit amet fringilla euismod. Aliquam condimen tum velit ut sapien dignissim, ut blandit neque fermentum uspendisse ante nunc..</p>
                        </div>  
                    </div>
                </div>
            </div>
        </section>
        
        <!-- genius members -->
        <section class="genius">
            <div class="container"> 
                <div class="row">
                    <div class="col-md-12">
                        <h5>Mind Blowing Team</h5>
                        <h2>Our Genius Members</h2>
                    </div>    
                    <div class="col-md-3 col-sm-6">
                        <div class="member text-center">
                            <div class="member-overlay">
                                <img class="img-responsive" src="/images/member1.jpg" alt="" />
                                <div><i class="ion ion-social-twitter-outline"></i></div>
                            </div>
                            <h3>Gabriel Stan</h3>
                            <span>Web Designer</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="member text-center">
                            <div class="member-overlay">
                                <img class="img-responsive" src="/images/member2.jpg" alt="" />
                                <div><i class="ion ion-social-twitter-outline"></i></div>
                            </div>
                            <h3>Gabriel Stan</h3>
                            <span>Web Designer</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="member text-center">
                            <div class="member-overlay">
                                <img class="img-responsive" src="/images/member3.jpg" alt="" />
                                <div><i class="ion ion-social-twitter-outline"></i></div>
                            </div>
                            <h3>Gabriel Stan</h3>
                            <span>Web Designer</span>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="member text-center">
                            <div class="member-overlay">
                                <img class="img-responsive" src="/images/member1.jpg" alt="" />
                                <div><i class="ion ion-social-twitter-outline"></i></div>
                            </div>
                            <h3>Gabriel Stan</h3>
                            <span>Web Designer</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- testimonials -->
        <section class="testimonials">
            <div class="container">
                <div class="row"> 
                    <div class="col-md-10 col-md-offset-1"> 
                            
                        <div class="testimonial-slide">
                            <div class="single-slide">
                                <div class="single-talk">
                                    <i class="icon icon-basic-message-multiple message"></i>
                                    <p>Lorem ipsum dolor sit amet reprehenderit, eiusmod high life accusamus terry richardson squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.</p> 
                                    <ul class="list-inline">
                                        <li><strong>Celsey Roy, CEO </strong></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star-o"></i></li>
                                    </ul>
                                </div>
                                <div class="text-center"><img src="/images/blog1.jpg" class="img-responsive" alt="#" /></div>
                            </div>
                            <div class="single-slide">
                                <div class="single-talk">
                                    <i class="icon icon-basic-message-multiple message"></i>
                                    <p>Lorem ipsum dolor sit amet reprehenderit, eiusmod high life accusamus terry richardson squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.</p> 
                                    <ul class="list-inline">
                                        <li><strong>Celsey Roy, CEO </strong></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star-o"></i></li>
                                    </ul>
                                </div>
                                <div class="text-center"><img src="/images/blog2.jpg" class="img-responsive" alt="#" /></div>
                            </div>
                            <div class="single-slide">
                                <div class="single-talk">
                                    <i class="icon icon-basic-message-multiple message"></i>
                                    <p>Lorem ipsum dolor sit amet reprehenderit, eiusmod high life accusamus terry richardson squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.</p> 
                                    <ul class="list-inline">
                                        <li><strong>Celsey Roy, CEO </strong></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star"></i></li>
                                        <li><i class="fa fa-star-o"></i></li>
                                    </ul>
                                </div>
                                <div class="text-center"><img src="/images/blog1.jpg" class="img-responsive" alt="#" /></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>    
        </section>
        
        <!-- CLIENTS -->   
        <section class="clients">
            <div class="ccontainer">
                <div class="row">
                    <div class="col-md-12 col-sm-12 text-center">
                        <div class="clients-logo">
                            <div class="single-slide"><img src="/images/clients/320x150-1.png" alt=""></div>
                            <div class="single-slide"><img src="/images/clients/320x150-2.png" alt=""></div>
                            <div class="single-slide"><img src="/images/clients/320x150-3.png" alt=""></div>
                            <div class="single-slide"><img src="/images/clients/320x150-4.png" alt=""></div>
                            <div class="single-slide"><img src="/images/clients/320x150-5.png" alt=""></div>
                            <div class="single-slide"><img src="/images/clients/320x150-6.png" alt=""></div>
                            <div class="single-slide"><img src="/images/clients/320x150-1.png" alt=""></div>
                            <div class="single-slide"><img src="/images/clients/320x150-2.png" alt=""></div>
                            <div class="single-slide"><img src="/images/clients/320x150-3.png" alt=""></div>
                        </div>
                    </div>    
                </div>    
            </div>            
        </section>
        
        <!-- footer -->
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-md-2  col-sm-3 col-xs-6">
                        <div class="footer-logo">
                            <div class="footer-logo-text">Exceed</div>
                            <p>Powered By Download Manager</p>
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-3 col-xs-6">
                        <h3>Links</h3>
                        <ul class="list-unstyled links">
                            <li>About</li>
                            <li>Services</li>
                            <li>History</li>
                            <li>Contact Us</li>
                        </ul>
                    </div>
                    <div class="col-md-2 col-sm-3 col-xs-6">
                        <h3>Pages</h3>
                        <ul class="list-unstyled links">
                            <li>About</li>
                            <li>Services</li>
                            <li>History</li>
                            <li>Contact Us</li>
                        </ul>
                    </div>
                    <div class="col-md-2 col-sm-3 col-xs-6">
                        <h3>Legal</h3>
                        <ul class="list-unstyled links">
                            <li>About</li>
                            <li>Services</li>
                            <li>History</li>
                            <li>Contact Us</li>
                        </ul>
                    </div>
                    <div class="col-md-2 col-sm-3 col-xs-6">
                        <h3>Social</h3>
                        <ul class="list-unstyled links">
                            <li><i class="ion ion-social-facebook"></i>facebok</li>
                            <li><i class="ion ion-social-twitter"></i>Twitter</li>
                            <li><i class="ion ion-social-linkedin"></i>Linkedin</li>
                            <li><i class="ion ion-social-googleplus"></i>Google+</li>
                        </ul>
                    </div>
                    <div class="col-md-2 col-sm-3 col-xs-6">
                        <h3>Contact</h3>
                        <ul class="list-unstyled links">
                            <li>554A, Comflare </li>
                            <li>Avenue</li>
                            <li>01234 567 890</li>
                            <li>hi@comflare.com</li>
                        </ul>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-12">
                        <div class="copyright">
                            <p class="text-center" >&copy;Designed By Scripteden 2016 / More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
                            <!--ul class="list-inline pull-right">
                                <li>Privacy Policy </li>
                                <li>Terms Of Use</li>
                            </ul-->
                        </div>
                    </div>
                </div>    
            </div>
        </footer>
        
        <!-- javascript -->
        <script src="/js/jquery-v1.11.3.js"></script>
		<script src="/bootstrap/js/bootstrap.min.js"></script>
		<script src="/js/owl.carousel.js"></script>
		<script src="/js/isotope.pkgd.js"></script>
        <script type="text/javascript" src="/js/jquery.cslider.js"></script>
		<script src="/js/custom.js"></script>
    </body>
</html>     